<template>
  <a-modal :width="1200" v-model:visible="showDataDialog" :footer="false" title="操作日志" title-align="start" :mask-closable="false" @cancel="closedDialog">
    <div class="flex">
      <div class="item">
        <p class="title">修改前</p>
        <a-scrollbar style="width: 550px; height: calc(84vh - 100px); overflow: auto">
          <JsonView :json="beforeData" :closed="false" style="overflow-x: auto" />
        </a-scrollbar>
      </div>
      <div class="item">
        <p class="title">修改后</p>
        <a-scrollbar style="width: 550px; height: calc(84vh - 100px); overflow: auto">
          <JsonView :json="afterData" :closed="false" />
        </a-scrollbar>
      </div>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  const emit = defineEmits(['closed'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
    },
    currentData: {
      type: Object,
      default: () => {},
    },
  })

  const showDataDialog = ref(props.isShow)
  const afterData = ref(JSON.parse(props.currentData?.afterData || '{}'))
  const beforeData = ref(JSON.parse(props.currentData?.beforeData || '{}'))

  // 关闭
  function closedDialog() {
    showDataDialog.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped>
  .item {
    flex: 1;
    padding: 0 10px 10px;
    height: calc(84vh - 100px);
  }
</style>
